div {
    width: 600px;
    height: 600px;
    animation: bgGlow 2s ease-in-out alternate forwards;
}

@keyframes bgGlow {
    from {
        background-color: #5baad8;
    }
    to {
        background-color: #663366;
    }
}

/*发光变色的button*/
@-webkit-keyframes buttonLight {
    from {
        background: rgba(96, 203, 27, 0.5);
        -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 12, 200, 0.5);
        color: red;
    }
    10% {
        background: rgba(196, 203, 27, 0.8);
        -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8);
        color: blue;
    }
    80% {
        background: rgba(196, 203, 127, 1);
        -webkit-box-shadow: 0 0 5px rgba(155, 255, 255, 0.3) inset, 0 0 3px rgba(200, 120, 100, 1);
        color: orange;
    }
    90% {
        background: rgba(196, 203, 27, 0.8);
        -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8);
        color: black;
    }

    to {
        background: rgba(96, 203, 27, 0.5);
        -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5);
        color: green;
    }
}

.btn {
    background: #60cb1b;
    font-size: 100px;
    padding: 10px 15px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
    -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
    /*调用animation属性，从而让按钮在载入页面时就具有动画效果*/
    -webkit-animation-name: buttonLight; /*动画名称，需要跟@keyframes定义的名称一致*/
    -webkit-animation-duration: 5s; /*动画持续的时间长*/
    -webkit-animation-iteration-count: 1; /*动画循环播放的次数*/
    -webkit-animation-fill-mode: forwards;
}

/*方形旋转变成圆形*/
@-webkit-keyframes round {
    from {
        transform: rotate(36deg);
        border-radius: 2px;
    }
    10% {
        -webkit-transform: rotate(72deg);
        -webkit-border-radius: 4px;
    }
    20% {
        -webkit-transform: rotate(108deg);
        -webkit-border-radius: 6px;
    }
    30% {
        -webkit-transform: rotate(144deg);
        -webkit-border-radius: 9px;
    }
    40% {
        -webkit-transform: rotate(180deg);
        -webkit-border-radius: 9px;
    }
    50% {
        -webkit-transform: rotate(216deg);
        -webkit-border-radius: 14px;
    }
    60% {
        -webkit-transform: rotate(252deg);
        -webkit-border-radius: 16px;
    }
    70% {
        -webkit-transform: rotate(288deg);
        -webkit-border-radius: 19px;
    }
    80% {
        -webkit-transform: rotate(324deg);
        -webkit-border-radius: 22px;
    }
    to {
        -webkit-transform: rotate(360deg);
        -webkit-border-radius: 25px;
    }
}

.round {
    display: block;
    width: 200px;
    height: 200px;
    background-color: #d9d9e0;
    margin-bottom: 20px;
    border-radius: 25px;
    -webkit-animation-name: round;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;

}








































